<template>
  <div class="storage-item">
    <div class="text">
      <div class="title">
        {{ data.beamNo }}
      </div>
      <div class="item">
        完成时间：{{ data.gmtFinish | timeDate }}
      </div>
      <div
        class="item"
        v-if="data.beamStatus === 1"
      >
        存量位置：{{ `${data.locationArea}-${data.locationFloor}` }}
      </div>
      <div
        class="item"
        v-if="data.beamStatus !== 0"
      >
        存梁时间：{{ data.gmtStorage | timeDate }}
      </div>
      <div
        class="item"
        v-if="data.beamStatus === 1"
      >
        存梁时长：{{ data.storageLength }}
      </div>
      <div
        class="item"
        v-if="data.beamStatus === 2"
      >
        出厂时间：{{ data.gmtOut | timeDate }}
      </div>
    </div>
    <div class="btn">
      <van-button
        plain
        type="info"
        @click="storage"
        v-if="data.beamStatus === 0"
      >
        存梁
      </van-button>
      <van-button
        plain
        type="info"
        @click="factory"
        v-else-if="data.beamStatus === 1"
      >
        出厂
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductItem",
  props: {
    name: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: 1,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {};
  },
  methods: {
    storage() {
      this.$emit("storage");
    },
    factory() {
      this.$emit("factory");
    }
  }
};
</script>

<style lang="scss" scoped>
.storage-item {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  .text {
    flex: 1;
    width: 0;
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .item {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }
  }
}
</style>
